<template>
  <div class="home">
    <div class="main-area">
      <img class="logo" src="../assets/login-logo.png" alt="">
      <div class="btn-area">
        <img src="../assets/login-font.png" alt="">
        <el-button class="btn"  @click="goLogin"><span class="btn-font">请登录</span></el-button>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "Home",
  methods:{
    goLogin(){
      this.$router.push('/login')
    }
  },
};
</script>

<style lang="less" scoped>
  .main-area{
    display: flex;
    justify-content: center;
    padding-top: 172px;
    .logo{
      width: 449px;
      height: 350px;
    }
    .btn-area{
      padding-left: 107px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .btn{
        width: 593px;
        height: 100px;
        background: #FFFFFF;
        border-radius: 8px;
        .btn-font{
          width: 87px;
          height: 62px;
          font-size: 44px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #1E96C3;
          line-height: 62px;
          background: linear-gradient(170deg, #37BE98 0%, #0F7DDF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
  }
  }
  .home{
    background: url('../assets/background.png');
    height: 100vh;
    background-size: cover;
}
  h1{
    color: rgb(28, 136, 207);
    font-size: 70px;
  }


</style>
